<template>
	<view class="container">
		<span class="food">
			{{food}}
		</span>
		<button class="btn" @click="toggleRandom">{{start?"停止":"开始"}}</button>
		<view class="custom" @click="custom">
			<span>自定义</span>
		</view>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
			<view class="pop">
				<textarea name="" id="" cols="30" rows="10" v-model="data"></textarea>
				<span style="color: gray;">提示:菜品间请用空格分隔</span>
				<view class="pop-btn">
					<view @click="recognition" >识别菜单</view>
					<button @click="confirm">确认</button>
					<view @click="reset">重置</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				data: "番茄炒蛋 宫保鸡丁 鱼香肉丝 红烧肉 清蒸鲈鱼 糖醋排骨 麻婆豆腐 土豆烧牛肉 蒜蓉西兰花 油焖大虾 凉拌黄瓜 酸辣土豆丝 红烧茄子 干煸四季豆 炒时蔬 葱油拌面 扬州炒饭 红烧狮子头 糖醋里脊 酸菜鱼 番茄牛腩 干锅菜花 蒜蓉粉丝蒸扇贝 香辣蟹 清蒸大闸蟹 鱼香茄子煲 酸辣汤 凉拌皮蛋 红烧带鱼 蒜蓉烤生蚝 香辣鸡翅 清炖羊肉 番茄鸡蛋汤 红烧猪蹄 蒜蓉烤茄子 凉拌海蜇 干锅牛蛙 清蒸扇贝 红烧鸡翅 糖醋鱼块 蒜蓉烤鱼 香辣田螺 清蒸海螺 红烧豆腐 凉拌木耳 蒜蓉烤虾 香辣烤鱼 清炖牛肉 番茄炒虾仁 红烧鸡块 糖醋排骨煲 蒜蓉烤扇贝 香辣烤蟹 清蒸鱼翅 红烧鱼肚 糖醋虾球 干锅花菜 蒜蓉烤蟹 香辣烤扇贝 清蒸鱼头 红烧鱼片 糖醋鱼翅 干锅牛蛙腿 蒜蓉烤鱼翅 香辣烤鱼肚 清炖鱼翅 番茄炒牛肉 红烧鱼尾 糖醋鱼头 干锅鱼片 蒜蓉烤鱼头 香辣烤鱼尾 清蒸鱼块",
				list: [],
				food: "宫保鸡丁",
				start: false,
				index: 0,
				type: 'center',
				imgurl: '',
				title: '',
			}
		},
		onLoad() {
			this.splitString();
		},
		methods: {
			//识别菜单
			recognition(){
				//调用相册
				this.chooseImage();
			},
			
			//重置
			reset() {
				this.data =
					"番茄炒蛋 宫保鸡丁 鱼香肉丝 红烧肉 清蒸鲈鱼 糖醋排骨 麻婆豆腐 土豆烧牛肉 蒜蓉西兰花 油焖大虾 凉拌黄瓜 酸辣土豆丝 红烧茄子 干煸四季豆 炒时蔬 葱油拌面 扬州炒饭 红烧狮子头 糖醋里脊 酸菜鱼 番茄牛腩 干锅菜花 蒜蓉粉丝蒸扇贝 香辣蟹 清蒸大闸蟹 鱼香茄子煲 酸辣汤 凉拌皮蛋 红烧带鱼 蒜蓉烤生蚝 香辣鸡翅 清炖羊肉 番茄鸡蛋汤 红烧猪蹄 蒜蓉烤茄子 凉拌海蜇 干锅牛蛙 清蒸扇贝 红烧鸡翅 糖醋鱼块 蒜蓉烤鱼 香辣田螺 清蒸海螺 红烧豆腐 凉拌木耳 蒜蓉烤虾 香辣烤鱼 清炖牛肉 番茄炒虾仁 红烧鸡块 糖醋排骨煲 蒜蓉烤扇贝 香辣烤蟹 清蒸鱼翅 红烧鱼肚 糖醋虾球 干锅花菜 蒜蓉烤蟹 香辣烤扇贝 清蒸鱼头 红烧鱼片 糖醋鱼翅 干锅牛蛙腿 蒜蓉烤鱼翅 香辣烤鱼肚 清炖鱼翅 番茄炒牛肉 红烧鱼尾 糖醋鱼头 干锅鱼片 蒜蓉烤鱼头 香辣烤鱼尾 清蒸鱼块";
			},

			//确定
			confirm() {
				this.splitString();
				this.$refs.popup.close();
			},
			//选择
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			//分割字符串
			splitString() {
				//以空格分割
				this.list = this.data.split(" ");
			},
			toggleRandom() {
				this.start = !this.start; // 切换 start 的值
				if (this.start) {
					this.random();
				}
			},
			//随机
			random() {
				if (this.start) {
					let index = Math.floor(Math.random() * this.list.length);
					this.food = this.list[index];
					setTimeout(this.random, 100); // 使用递归调用代替 while 循环
				}
			},
			//自定义
			custom() {
				console.log("自定义");
				this.openPopup()
			},
			openPopup() {
				this.$refs.popup.open('center')
			},
			//调用相册
			chooseImage() {
				this.title = '正在上传图片...';
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log(res);
						//加载
						uni.showLoading({
							title: this.title,
						});
						const tempFilePaths = res.tempFilePaths;
						this.imgurl = tempFilePaths[0];
						this.ocr();
					}
				});
			},
			//ocr识别接口调用
			ocr() {
				console.log("调用ocr");
				this.title = '正在识别菜单...';
				if (!this.imgurl) {
					console.log('图片路径为空');
					return;
				}
				uni.uploadFile({
					url: 'http://10.100.161.12:5000/extract_text', // 服务器接口地址
					filePath: this.imgurl, // 需要上传的文件路径
					name: 'file', // 服务器端接收文件的字段名
					success: (res) => {
						if (res.statusCode === 200) {
							this.title = '正在清洗数据'
							console.log(res.data);
							// 假设服务器返回的是 JSON 格式数据
							this.data = "";
							this.data = this.cleanData(res.data);
							uni.hideLoading();
							uni.showToast({
								title: '识别成功',
								icon: 'success'
							});
							} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			},
			//数据清洗
			cleanData(data) {
				let result = JSON.parse(data);
				let extractedTextArray = result.extracted_text;
				// 使用正则表达式来检查元素是否包含数字
				let filteredArray = extractedTextArray.filter(item => !/\d/.test(item));
				// 使用空格作为分隔符，将过滤后的数组元素连接成字符串
				let spacedText = filteredArray.join(' ');
				return spacedText;  // 将结果赋值给this.data
			}
		},
	}
</script>
<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin-left: -5px;
		background-image: url("http://hbimg.huaban.com/35e9d8095167fe291c2d9cb05f4ce40aa0220c38c7f79-ZITSCQ");

		.food {
			font-size: 24px;
			font-weight: bold;
			color: #333;
			margin-bottom: 200px;
		}

		.btn {
			width: 200px;
			border-radius: 20px;
			background-color: #00B26A;
			color: white;
		}

		.custom {}

		.pop {
			background-color: white;
			padding: 30rpx;
			border-radius: 10rpx;

			textarea {
				padding: 5px;
				border: 1rpx solid #333;
			}

			.pop-btn {
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;

				button {
					height: 5vh;
					line-height: 5vh;
					width: 20vh;
					background-color: #00B26A;
				}
			}
		}
	}
</style>